<!-- 带缩略图的自动轮播 -->
<template>
  <div class="carousel">
    <el-carousel
      ref="carousel"
      :autoplay="false"
      direction="vertical"
      arrow="always"
      indicator-position="none"
      height="540px"
    >
      <el-carousel-item v-for="(item,index) in newList" :key="index">
        <div v-for="(row,ix) in item" :key="ix" class="row">
          <img :src="row.pic" alt="">
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 1 -->
    <div @click="nextPage('up')">
      上一页
    </div>
    <div @click="nextPage('down')">
      下一页
    </div>

    <ul>
      <li v-for="(item,index) in filtSubs" :key="index">
        {{ item.id }}
      </li>
      <div @click="expand">
        {{ text }}
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          id: 1,
          pic: require('@/static/img/upload/01.jpg')
        },
        {
          id: 2,
          pic: require('@/static/img/upload/02.jpg')
        },
        {
          id: 3,
          pic: require('@/static/img/upload/01.jpg')
        },
        {
          id: 4,
          pic: require('@/static/img/upload/03.jpg')
        },
        {
          id: 5,
          pic: require('@/static/img/upload/02.jpg')
        }
      ],
      limitNum: 2,
      text: '展开'
    }
  },
  computed: {
    newList () {
      return this.list.reduce((map, item, index) => {
        const page = parseInt(index / 3)
        if (!map[page]) {
          map[page] = []
        }
        map[page].push(item)
        return map
      }, {})
    },
    filtSubs () {
      console.log(this.list.slice(0, 2), 'duix')
      return this.list.slice(0, this.limitNum)
    }
  },
  methods: {
    nextPage (els) {
      if (els === 'up') {
        this.$refs.carousel.prev()
      } else {
        this.$refs.carousel.next()
      }
    },
    expand () {
      if (this.limitNum === 2) {
        this.limitNum = this.list.length
        this.text = '收起'
      } else {
        this.limitNum = 2
        this.text = '展开'
      }
    }
  }
}
</script>
<style scoped lang="scss">
.carousel{
  width: 300px;
  height: 540px;
}
.carousel/deep/{
  .row{
    width: 100%;
    height: 124px;
    overflow: hidden;
    margin-bottom: 10px;
    img{
      width: 100%;
    }
  }
}

ul{
  margin: 50px;
  li{
    margin-bottom: 100px;
  }
}
</style>
